<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BrainCube Logo 预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 40px 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #4A90E2 0%, #8B5FBF 100%);
            color: white;
            padding: 40px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 40px;
        }
        
        .logo-section {
            margin-bottom: 60px;
            padding: 30px;
            border-radius: 15px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
        }
        
        .logo-section h2 {
            color: #4A90E2;
            margin-bottom: 20px;
            font-size: 1.8em;
            border-bottom: 3px solid #4A90E2;
            padding-bottom: 10px;
        }
        
        .logo-display {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 30px;
            margin: 30px 0;
        }
        
        .logo-item {
            text-align: center;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .logo-item:hover {
            transform: translateY(-5px);
        }
        
        .logo-item img {
            display: block;
            margin: 0 auto 15px;
        }
        
        .logo-item h3 {
            color: #2C3E50;
            margin-bottom: 10px;
        }
        
        .logo-item p {
            color: #5D6D7E;
            font-size: 0.9em;
        }
        
        .background-demo {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .bg-demo {
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .bg-demo:hover {
            transform: scale(1.05);
        }
        
        .bg-white {
            background: white;
            border: 2px solid #e9ecef;
        }
        
        .bg-light {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
        }
        
        .bg-dark {
            background: #2C3E50;
            color: white;
        }
        
        .bg-gradient {
            background: linear-gradient(135deg, #4A90E2 0%, #8B5FBF 100%);
            color: white;
        }
        
        .color-palette {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 30px 0;
        }
        
        .color-item {
            text-align: center;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .color-swatch {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        
        .color-info {
            padding: 15px;
            background: white;
        }
        
        .color-info h4 {
            color: #2C3E50;
            margin-bottom: 5px;
        }
        
        .color-info p {
            color: #5D6D7E;
            font-size: 0.9em;
            font-family: 'Courier New', monospace;
        }
        
        .usage-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .usage-item {
            padding: 20px;
            background: white;
            border-radius: 10px;
            border-left: 4px solid #4A90E2;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .usage-item h4 {
            color: #4A90E2;
            margin-bottom: 10px;
        }
        
        .usage-item ul {
            list-style: none;
            padding-left: 0;
        }
        
        .usage-item li {
            padding: 5px 0;
            color: #5D6D7E;
            position: relative;
            padding-left: 20px;
        }
        
        .usage-item li:before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #2ECC71;
            font-weight: bold;
        }
        
        .footer {
            background: #2C3E50;
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .footer p {
            opacity: 0.8;
        }
        
        @media (max-width: 768px) {
            .logo-display {
                flex-direction: column;
            }
            
            .background-demo {
                grid-template-columns: 1fr;
            }
            
            .color-palette {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>BrainCube Logo 设计展示</h1>
            <p>智能认知测试平台 - 品牌视觉识别系统</p>
        </div>
        
        <div class="content">
            <!-- 主Logo展示 -->
            <div class="logo-section">
                <h2>主Logo版本</h2>
                <div class="logo-display">
                    <div class="logo-item">
                        <img src="logo.svg" alt="主Logo" width="120" height="120">
                        <h3>完整版Logo</h3>
                        <p>120×120px<br>用于品牌展示、启动页</p>
                    </div>
                    <div class="logo-item">
                        <img src="logo-icon.svg" alt="图标Logo" width="64" height="64">
                        <h3>图标版Logo</h3>
                        <p>64×64px<br>用于应用图标、小尺寸显示</p>
                    </div>
                    <div class="logo-item">
                        <img src="logo-text.svg" alt="文字Logo" width="200" height="60">
                        <h3>文字版Logo</h3>
                        <p>200×60px<br>用于页面标题、横幅</p>
                    </div>
                </div>
            </div>
            
            <!-- 背景适应性展示 -->
            <div class="logo-section">
                <h2>背景适应性测试</h2>
                <div class="background-demo">
                    <div class="bg-demo bg-white">
                        <img src="logo-icon.svg" alt="Logo" width="48" height="48">
                        <p>白色背景</p>
                    </div>
                    <div class="bg-demo bg-light">
                        <img src="logo-icon.svg" alt="Logo" width="48" height="48">
                        <p>浅色背景</p>
                    </div>
                    <div class="bg-demo bg-dark">
                        <img src="logo-icon.svg" alt="Logo" width="48" height="48">
                        <p>深色背景</p>
                    </div>
                    <div class="bg-demo bg-gradient">
                        <img src="logo-icon.svg" alt="Logo" width="48" height="48">
                        <p>渐变背景</p>
                    </div>
                </div>
            </div>
            
            <!-- 色彩规范 -->
            <div class="logo-section">
                <h2>品牌色彩规范</h2>
                <div class="color-palette">
                    <div class="color-item">
                        <div class="color-swatch" style="background: #4A90E2;">主色</div>
                        <div class="color-info">
                            <h4>智慧蓝</h4>
                            <p>#4A90E2</p>
                        </div>
                    </div>
                    <div class="color-item">
                        <div class="color-swatch" style="background: #8B5FBF;">辅色</div>
                        <div class="color-info">
                            <h4>创新紫</h4>
                            <p>#8B5FBF</p>
                        </div>
                    </div>
                    <div class="color-item">
                        <div class="color-swatch" style="background: #6BA3E8;">高亮</div>
                        <div class="color-info">
                            <h4>浅蓝</h4>
                            <p>#6BA3E8</p>
                        </div>
                    </div>
                    <div class="color-item">
                        <div class="color-swatch" style="background: #3A7BC8;">阴影</div>
                        <div class="color-info">
                            <h4>深蓝</h4>
                            <p>#3A7BC8</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 使用规范 -->
            <div class="logo-section">
                <h2>使用规范指南</h2>
                <div class="usage-grid">
                    <div class="usage-item">
                        <h4>主Logo使用场景</h4>
                        <ul>
                            <li>应用启动页面</li>
                            <li>关于我们页面</li>
                            <li>品牌宣传材料</li>
                            <li>官方文档封面</li>
                        </ul>
                    </div>
                    <div class="usage-item">
                        <h4>图标版使用场景</h4>
                        <ul>
                            <li>应用程序图标</li>
                            <li>导航栏标识</li>
                            <li>社交媒体头像</li>
                            <li>小尺寸展示</li>
                        </ul>
                    </div>
                    <div class="usage-item">
                        <h4>文字版使用场景</h4>
                        <ul>
                            <li>页面标题栏</li>
                            <li>邮件签名</li>
                            <li>横幅广告</li>
                            <li>文档页眉</li>
                        </ul>
                    </div>
                    <div class="usage-item">
                        <h4>注意事项</h4>
                        <ul>
                            <li>保持最小安全距离</li>
                            <li>不要拉伸变形</li>
                            <li>确保足够对比度</li>
                            <li>使用官方色彩</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2024 BrainCube 智能认知测试平台 - Logo设计规范</p>
        </div>
    </div>
</body>
</html>